<!-- eslint-disable vue/multi-word-component-names -->
<script lang="ts" setup>
import { onMounted, onBeforeUnmount } from 'vue'
import { Particle, Snow, WaveLoading, Wave } from 'jparticles'
// 引入性能监视器stats.js
import Stats from 'three/addons/libs/stats.module.js';
// 创建stats对象
const stats = new Stats();
// 0.渲染FPS（帧率）青色；1.MS（每帧渲染时间）绿色；2.MB（内存使用情况）粉色；3.显示自定义面板。
stats.showPanel(0); // 默认模式

import ThemeToggle from '@/components/ThemeToggle.vue'
import ScreenScaler from '@/components/ScreenScaler.vue'
import effect from '@/pages/effect.vue'
import ParticlesBg from '@/pages/ParticlesBg.vue'
import BlackHoleBackground from '@/pages/BlackHoleBackground.vue'
import VideoText from '@/pages/VideoText.vue'
import RadiantText from '@/pages/RadiantText.vue'
import AuroraBackground from '@/pages/AuroraBackground.vue'
import Carousel3D from '@/pages/Carousel3D.vue'
import FluidCursor from '@/pages/FluidCursor.vue'
import NeuralBg from '@/pages/NeuralBg.vue'

// const items: string[] = [];
// const num = 8;
// for (let i = 0; i < num; i++) {
//   items.push('https://picsum.photos/600/80'+i)
// }

const items = Array.from({ length: 8 }, () => `https://picsum.photos/600/800`);// 引入图片
// const items2 = Array.from({ length: 7 }, (_, i) => `/assets/images/mksy_icon0${i + 1}.png`);// 引入本地图片

const isDark = localStorage.getItem('theme') === 'dark'
const colorList = [
  '#ffffff',
  '#ffffffe6',
  '#ffffffcc',
  '#ffffffb2',
  '#ffffff99',
  '#ffffff80',
  '#ffffff66',
  '#ffffff4d',
  '#ffffff33',
  '#ffffff1a',
]
const duration = 1000

let animationId: number | null = null;
// 开始渲染
const animate = () => {
  // 渲染下一帧时调用 animate 函数
  animationId = requestAnimationFrame(animate);
  // 渲染性能数据
  stats.update();
}
onMounted(() => {
  animate();
  document.body.appendChild(stats.dom);

  const maskElement = document.querySelector('#mask')
  const loadingElement = document.querySelector('#loading')
  const wave = new Wave('#wave', {
    resize: true,
    num: 3,
    // 绘制边框，即线条
    line: true,
    // 三条线依次的颜色
    lineColor: ['#1ee3f3cc', '#1ee3f399', '#1ee3f366'],
    // 三条线依次的宽度
    lineWidth: [0.5, 0.7, 0.9],
    // 三条线依次距左的偏移值
    offsetLeft: [2, 1, 0],
    // 三条线都距顶偏移容器高度的 0.75 倍
    offsetTop: 0.75,
    // 三条线依次的波峰高度
    crestHeight: [10, 14, 18],
    // 三条线都只有两个波峰
    crestCount: 2,
    speed: 0.1,
  })
  wave.open()
  // wave.pause();

  const loading = new WaveLoading('#loading', {
    font: 'normal 900 16px Arial',
    resize: true,
    textColor: '#fff',
    textFormatter: '加载中...%d%',
    borderRadius: '50%',
    duration: duration,
  })

  setTimeout(() => {
    loading.done()
  }, duration)

  loading.onProgress((progress) => {
    // 当进度大于等于 60 时，设置进度文本颜色为白色。
    if (progress >= 60) {
      loading.setOptions({
        textColor: '#ffffff',
      })
    }
  })
  // 进度加载到 100% 后触发的事件。
  loading.onFinished(() => {
    // 加载完成后，隐藏遮罩及 loading 动画。
    // 开一个 500ms 的定时器，为了让 100% 这几个字能被看见。
    setTimeout(() => {
      if (maskElement) {
        // 由于 maskElement 类型为 Element，可能不存在 style 属性，因此需要将其断言为 HTMLElement 类型
        (maskElement as HTMLElement).style.display = 'none'
      }
      if (loadingElement) {
        // 由于 loadingElement 类型为 Element，可能不存在 style 属性，因此需要将其断言为 HTMLElement 类型
        (loadingElement as HTMLElement).style.display = 'none'
      }
    }, 500)
  })

  // 雪花特效
  const snow = new Snow('#snow', {
    num: 0.1,
    minR: 0.4,
    maxR: 4,
    minSpeed: 0.1,
    maxSpeed: 0.3,
    opacity: 0.6,
    color: colorList[0],
    // 是否随机变换飘落的方向
    swing: true,
    // 开启自旋
    spin: true,
    spinMinSpeed: 1,
    spinMaxSpeed: 10,
  })
  // 粒子特效
  const particle = new Particle('#particle', {
    // 两粒子圆心点之间的直线距离
    // proximity: 90,
    // 定位点半径 100 以内（包含）的所有粒子，圆心点之间小于等于 proximity 值，则连线
    // range: 100,
    // lineShape: 'cube',
    // 开启视差效果
    // parallax: true,
    // range 等于 0，粒子之间不连线
    range: 0,
    num: 0.1,
    minSpeed: 0.1,
    maxSpeed: 0.3,
    minR: 0.4,
    maxR: 4,
    // 开启自旋
    spin: true,
    spinMinSpeed: 1,
    spinMaxSpeed: 10,
    // 自定义颜色
    color: colorList,
    // 形状，支持 'circle'（圆形）、'triangle'（三角形）、'star'（星形）、'image'（图片）
    // 当为 'star' 时，后面可跟参数，如 'star:5:0.5'，语法：star:[边数]:[凹值]，表示五角星，凹值范围 0~1
    // @ts-expect-error 暂时忽略类型检查，后续可在类型定义中添加 shape 属性
    shape: [
      // 'circle',
      // 'triangle',
      // 'star',// 五角星
      // 'star:2:1',// 正四边形
      // 'star:3:1',// 正六边形
      // 'star:4:1',// 正八边形
      // 'star:4:0.1', 'star:4:0.5', 'star:4:0.9',
      // 'star:5:0.1', 'star:5:0.5', 'star:5:0.9',
      // 'star:30:0.1',
      // 'star:30:0.9',
      // 'https://raw.githubusercontent.com/Barrior/assets/main/smiling-face.gif',
      // 'https://raw.githubusercontent.com/Barrior/assets/main/bubble.png'
    ],
  })

  snow.open()
  // snow.pause()
  particle.open()
  // particle.pause()
});
// 销毁界面
onBeforeUnmount(() => {
  // Cancel animation loop
  if (animationId) {
    cancelAnimationFrame(animationId);
  }
  if (stats.dom && stats.dom.parentNode) {
    stats.dom.parentNode.removeChild(stats.dom);
  }
})
</script>

<template>
  <div class="main">
    <ScreenScaler :designWidth="1920">
      <ThemeToggle class="absolute top-0 right-30 z-100" />
      <FluidCursor />
      <effect />
      <div class="absolute size-full inset-0">
        <NeuralBg :hue="200" :saturation="1" :chroma="1" class="size-full opacity-15" />
      </div>
      <div class="absolute top-[50%] translate-y-[-50%] left-[50%] translate-x-[-50%] w-[1200px] h-[600px] z-100">
        <Carousel3D :items="items"></Carousel3D>
      </div>

      <div class="absolute size-full inset-0 z-10 flex flex-col justify-end">
        <div class="slogan w-[800px] mx-auto text-[36px] font-bold text-center border border-[1px]">
          这是一个文字颜色渐变的动画
        </div>
        <div class="w-full flex justify-center items-center">
          <RadiantText :duration="10" :radiantWidth="100">
            <div class="text-[36px] font-bold">这是一个发光的文字动画</div>
          </RadiantText>
        </div>
        <div class="w-full h-[60px]">
          <VideoText fontSize="36" src="https://cdn.magicui.design/ocean-small.webm"> 这是一个视频文本 </VideoText>
        </div>
        <div class="w-full h-[60px]">
          <VideoText fontSize="36" src="/src/assets/video/video.mp4"> 这也是一个视频文本 </VideoText>
        </div>
      </div>

      <div class="absolute size-full inset-0 z-1 opacity-10">
        <AuroraBackground />
      </div>
      <div class="absolute size-full inset-0 z-1 opacity-10">
        <BlackHoleBackground />
      </div>
      <ParticlesBg class="absolute size-full inset-0 z-1" :quantity="100" :ease="100" :color="isDark ? '#FFF' : '#000'"
        :staticity="10" refresh />

      <div hidden id="video" class="absolute size-full inset-0">
        <video class="w-full h-full object-cover" src="/src/assets/video/video.mp4" loop autoplay muted></video>
      </div>
      <div hidden id="snow" class="absolute size-full inset-0 rotate-180 z-9">
      </div>
      <div hidden id="wave" class="absolute size-full inset-0 z-10">
      </div>
      <div hidden id="mask" class="absolute size-full inset-0 bg-[#000000cc] z-11"></div>
      <div hidden id="loading"
        class="w-[120px] h-[120px] absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] z-12"></div>
      <div hidden id="particle" class="absolute size-full inset-0"></div>
    </ScreenScaler>
  </div>
</template>
<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100vh;
  background-image: url('/src/assets/images/mksy_bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  @keyframes masked-animation {
    0% {
      background-position: 0 0
    }

    to {
      background-position: -100% 0
    }
  }

  .slogan {
    background: linear-gradient(270deg, #ff7669 0, hsla(5, 79%, 81%, .95) 5%, hsla(0, 0%, 100%, .95) 10%, hsla(0, 0%, 100%, .95) 90%, hsla(5, 79%, 81%, .95) 95%, #ff7669);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    animation: masked-animation 5s linear infinite;
  }
}
</style>
